<template>
    <view class="page-wrap">
        <view>
            <u-search placeholder="请输入关键词" v-model="keyword" @search="handleSearch" :searchIconSize="44" />
        </view>
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleSchool(item)"
                :class="{checked: school && school.id === item.id}">
                {{item.label}}
                <view v-if="school && school.id === item.id" class="checkbox">
                    <u-icon size="1.5em" name="checkbox-mark" :color="color['primary-color']" />
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                keyword: '',
                event: '',
            };
        },
        computed: {
            ...mapState(['school'])
        },
        methods: {
            ...mapMutations(['setSchool']),
            // 加载数据
            load(paging) {
                this.$api.area.schoolList({
                    label: this.keyword
                }).then(res => {
                    this.list = this.list.concat(res.schoolList);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: this.list.length
                    });
                })
                // 加载失败
                // this.$refs.list.loadFail();
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.area.schoolList({
                    label: this.keyword
                }).then(res => {
                    this.list = res.schoolList;
                    // 刷新成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: this.list.length
                    });
                })
                // 刷新失败
                // this.$refs.list.refreshFail();
            },
            handleSearch() {
                this.$api.area.schoolList({
                    label: this.keyword
                }).then(res => {
                    this.list = res.schoolList;
                })
            },
            handleSchool(school) {
                this.setSchool(school);
                console.log('handleSchool', arguments)
                if (this.event) {
                    uni.$emit(this.event, school);
                }
                this.$toPage({ type: 'back' });
            }
        },
        watch: {},
        onLoad(option) {
            this.event = option.event;
        },
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .list-item {
            padding: 32rpx 0;
            border-bottom: 1rpx solid #eee;
            font-size: 32rpx;

            &.checked {
                color: $primary-color;
            }

            .checkbox {
                float: right;
            }
        }
    }
</style>